<template>
  <el-form-item>
    <el-select v-model="dateModel" style="width: 375px;" clearable filterable remote :loading="loading"
      :remote-method="remoteMethod" placeholder="物料名称" @change="dateChange()">
      <el-option v-for="i in itemName" :key="i.i" :label="i.q" :value="i.i">
      </el-option>
    </el-select>
  </el-form-item>
</template>

<script>
export default {
  name: 'SItem',
  props: {
    placeholder: "",

  },
  data() {
    return {
      dateModel: "",
      itemName: [],
      all: [],
      initData: [],
      loading: false
    }
  },
  methods: {
    dateChange: function () {
      this.$emit('input', this.dateModel)
    },
    remoteMethod(query) {

      if (query !== '') {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          var q = query.toLowerCase();
          debugger
          var data = [];
          for (var i = 0; i < this.all.length; i++) {
            if (data.length >= 10) {
              break;
            }
            var item = Object.assign({}, this.all[i]);
            item.q = item.c + "/" + item.n + "/" + item.g;
            if (item.q.indexOf(q) > -1) {
              data.push(item);

            }
          }
          this.itemName = data;


        }, 200);
      } else {
        this.itemName = this.initData;
      }
    }
  },
  created() {
    this.all = this.$store.state.dict.item;

    var max=this.all.length;
    if(max>10){
      max=10;
    }
    for (var i = 0; i < max; i++) {
      var item = Object.assign({}, this.all[i])
      item.q = item.c + "/" + item.n + "/" + item.g;
      this.initData.push(item);
    }
    this.itemName = this.initData;
  }
}
</script>
 